<template>
	<view class="poster-container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 返回按钮 -->
		<view class="back-button" @tap="goBack">
			<text class="iconfont icon-fanhui"></text>
		</view>
		
		<!-- 海报主图 -->
		<view class="poster-hero">
			<image :src="bannerData.image" mode="aspectFill" class="poster-image"></image>
			<view class="poster-overlay"></view>
			<view class="poster-title">
				<text class="main-title">{{bannerData.title}}</text>
				<text class="sub-title">{{bannerData.subtitle}}</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 标签 -->
			<view class="tags">
				<view class="tag" v-for="(tag, index) in bannerData.tags" :key="index">{{tag}}</view>
			</view>
			
			<!-- 简介 -->
			<view class="description">
				<text class="section-title">简介</text>
				<text class="description-text">{{bannerData.description}}</text>
			</view>
			
			<!-- 特色和亮点 -->
			<view class="features">
				<text class="section-title">特色亮点</text>
				<view class="feature-item" v-for="(feature, index) in bannerData.features" :key="index">
					<view class="feature-icon">
						<text class="iconfont" :class="feature.icon"></text>
					</view>
					<view class="feature-content">
						<text class="feature-title">{{feature.title}}</text>
						<text class="feature-desc">{{feature.description}}</text>
					</view>
				</view>
			</view>
			
			<!-- 相关产品 -->
			<view class="related-products">
				<text class="section-title">相关产品</text>
				<scroll-view scroll-x="true" class="products-scroll">
					<view class="product-card" v-for="(product, index) in bannerData.relatedProducts" :key="index" @tap="navigateToProduct(product.id)">
						<image :src="product.image" mode="aspectFill" class="product-image"></image>
						<text class="product-name">{{product.name}}</text>
						<text class="product-price">¥{{product.price}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="share-btn" @tap="shareContent">
				<text class="iconfont icon-fenxiang"></text>
				<text>分享</text>
			</button>
			<button class="action-btn" @tap="navigateToCategory">浏览全部</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerId: null,
				bannerData: {
					// 默认数据，实际应该根据bannerId从服务器获取
					title: '千年佛经',
					subtitle: '传承东方智慧',
					image: 'https://ts1.tc.mm.bing.net/th/id/R-C.a677df796c1d46d98ab00092b8d1261f?rik=ndH9qNeeBpbpqQ&riu=http%3a%2f%2fy1.ifengimg.com%2fa%2f2015_10%2fc6d05b0ebc87d0a.jpg&ehk=fNcHMggzoFWhi65FbZIlciPQiR4hggNnGkCUZ6Fpfq8%3d&risl=&pid=ImgRaw&r=0',
					description: '佛经是佛教文化的瑰宝，承载着数千年的东方智慧。我们精选古代珍本，采用传统工艺制作，每一页都凝聚着匠人的心血。无论是收藏、研习还是馈赠亲友，都是不可多得的精神珍品。',
					tags: ['限量收藏', '传统工艺', '文化传承'],
					features: [
						{
							icon: 'icon-fojing',
							title: '古法线装',
							description: '采用传统线装工艺，保留古籍原貌，触感细腻，翻阅流畅'
						},
						{
							icon: 'icon-qingming',
							title: '宣纸印刷',
							description: '甄选上等宣纸，手工印刷，墨色清晰，典雅庄重'
						},
						{
							icon: 'icon-wenchuang',
							title: '珍藏版礼盒',
							description: '配套精美檀木礼盒，内置香熏，开启即可感受禅意氛围'
						}
					],
					relatedProducts: [
						{
							id: 1,
							name: '楞严经典藏版',
							price: 299,
							image: 'https://ts1.tc.mm.bing.net/th/id/R-C.a6d78485e19104b7d295707ef1773d7c?rik=Qvb6uXFU3VZAWg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn10116%2f363%2fw640h523%2f20200115%2ff2c7-imztzhp1958098.jpg&ehk=7ftkcoIOWphHNDmXJj%2fDDTnAnYKJi5hhMnBkCHzRlTo%3d&risl=&pid=ImgRaw&r=0'
						},
						{
							id: 5,
							name: '手工线装经书',
							price: 259,
							image: 'https://ts1.tc.mm.bing.net/th/id/R-C.c6bd70d094c555e7bb87f368029c631c?rik=x16IsNXwHZuJTA&riu=http%3a%2f%2fwww.guoxuemeng.com%2ffiles%2fimg%2f1912%2f1556135K0-0.jpg&ehk=XAfxUz6TE2iqkAQ9xE%2fD%2bAIk4zoxqU73QEbOLt5TlJo%3d&risl=&pid=ImgRaw&r=0'
						},
						{
							id: 10,
							name: '心经手抄本',
							price: 199,
							image: 'https://img.alicdn.com/bao/uploaded/i2/2206440605876/O1CN01FglySa1NuZmPChOfo_!!0-item_pic.jpg'
						},
						{
							id: 11,
							name: '金刚经珍藏版',
							price: 349,
							image: 'https://img.alicdn.com/bao/uploaded/i1/2214440668/O1CN01jlNNE11Dvdg3qP2gD_!!0-item_pic.jpg'
						}
					]
				}
			}
		},
		onLoad(options) {
			// 获取轮播图ID
			if (options.id) {
				this.bannerId = options.id;
				// 根据ID获取数据
				this.fetchBannerData();
			}
		},
		methods: {
			// 获取轮播图详情数据
			fetchBannerData() {
				// 这里应该是从服务器获取数据
				// 示例中使用默认数据，实际使用时应替换为API调用
				
				// 示例：根据不同的bannerId展示不同的内容
				if (this.bannerId === '2') {
					this.bannerData = {
						title: '禅意香器',
						subtitle: '静心生活美学',
						image: 'https://img.alicdn.com/i2/2553805180/O1CN011TP5r31o8U7w04ydm_!!2553805180.jpg',
						description: '禅意香器承载着东方文化的精髓，既是实用的香道工具，也是艺术品与装饰品的结合。每一款香器都经过精心设计与制作，让您在繁忙的都市生活中，找到内心的平静与安宁。',
						tags: ['匠心制作', '艺术收藏', '禅意生活'],
						features: [
							{
								icon: 'icon-Artboard50',
								title: '天然材质',
								description: '甄选优质紫砂、白瓷、檀木等天然材料，保留原始质感'
							},
							{
								icon: 'icon-chuangtong',
								title: '传统工艺',
								description: '结合现代设计与传统工艺，每件作品都由匠人手工完成'
							},
							{
								icon: 'icon-chancha',
								title: '禅意体验',
								description: '以香养心，以器养性，打造专属您的静心时刻'
							}
						],
						relatedProducts: [
							{
								id: 6,
								name: '檀香木香炉',
								price: 329,
								image: 'https://cbu01.alicdn.com/img/ibank/O1CN01XgQBGd1sn1q3bYvqP_!!3837125810-0-cib.360x360.jpg'
							},
							{
								id: 8,
								name: '莲花香插',
								price: 89,
								image: 'https://cbu01.alicdn.com/img/ibank/O1CN01lkCPjv1QYYCToQ0Uq_!!2214986111988-0-cib.jpg'
							},
							{
								id: 12,
								name: '紫砂香熏炉',
								price: 259,
								image: 'https://img.alicdn.com/bao/uploaded/i4/2214578610089/O1CN01m6lKht1FDy2wFq9q4_!!0-item_pic.jpg'
							},
							{
								id: 13,
								name: '青瓷倒流香炉',
								price: 179,
								image: 'https://cbu01.alicdn.com/img/ibank/O1CN01HBJWVk1tPnwLWcTwE_!!2209289474126-0-cib.jpg'
							}
						]
					};
				} else if (this.bannerId === '3') {
					this.bannerData = {
						title: '手工文创',
						subtitle: '匠心独运之作',
						image: 'https://ts1.tc.mm.bing.net/th/id/R-C.eec8d89a183944fa2f17d9b2db4d6959?rik=e7QujU9nFa6%2bsw&riu=http%3a%2f%2fyueyo8.com%2fupload%2fimage%2f20200423%2f20200423180454_9349.jpg&ehk=syiAq%2bkDwjDMcDTYVl85Bus3Ar2nl5Zp1AfGdem9gOE%3d&risl=&pid=ImgRaw&r=0',
						description: '天禅镜手工文创秉承东方美学理念，将传统文化元素与现代设计语言相融合，每一件作品都蕴含着匠人的温度与智慧。既可收藏欣赏，又能融入日常生活，让艺术与实用并行。',
						tags: ['手工制作', '文化创新', '东方美学'],
						features: [
							{
								icon: 'icon-wenchuang',
								title: '创意设计',
								description: '融合传统与现代的原创设计，彰显东方文化底蕴'
							},
							{
								icon: 'icon-shouyizhizuo',
								title: '匠心工艺',
								description: '每件产品均由经验丰富的工匠纯手工制作，细节精致'
							},
							{
								icon: 'icon-chuangtong',
								title: '文化传承',
								description: '传统文化元素的现代演绎，让古老智慧融入当代生活'
							}
						],
						relatedProducts: [
							{
								id: 7,
								name: '禅意挂画',
								price: 159,
								image: 'https://img.alicdn.com/bao/uploaded/i1/869856172/O1CN016sv7me1vSpEozyakb_!!0-item_pic.jpg'
							},
							{
								id: 4,
								name: '纯铜法轮摆件',
								price: 389,
								image: 'https://cbu01.alicdn.com/img/ibank/2019/926/729/10887927629_1723734573.jpg'
							},
							{
								id: 14,
								name: '手工木刻佛像',
								price: 299,
								image: 'https://img.alicdn.com/bao/uploaded/i1/2201450604342/O1CN01pUZHPy1qU6xfZeLoA_!!0-item_pic.jpg'
							},
							{
								id: 15,
								name: '陶瓷禅意花器',
								price: 199,
								image: 'https://img.alicdn.com/bao/uploaded/i3/757577917/O1CN01yYuJwx24vogZTXoaS_!!0-item_pic.jpg'
							}
						]
					};
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 导航到产品详情
			navigateToProduct(productId) {
				uni.navigateTo({
					url: `/pages/shapping/detail?id=${productId}`
				});
			},
			
			// 导航到分类页
			navigateToCategory() {
				// 根据当前banner类型决定跳转到哪个分类
				let categoryType = '';
				if (this.bannerId === '1' || !this.bannerId) {
					categoryType = 'fojing'; // 佛经分类
				} else if (this.bannerId === '2') {
					categoryType = 'xiangqi'; // 香器分类
				} else {
					categoryType = 'wenchuang'; // 文创分类
				}
				
				uni.navigateTo({
					url: `/pages/shapping/category?type=${categoryType}`
				});
			},
			
			// 分享内容
			shareContent() {
				uni.showShareMenu({
					withShareTicket: true,
					success() {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F2EA;
		font-family: "思源宋体", serif;
	}
	
	.poster-container {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.back-button {
		position: fixed;
		top: calc(var(--status-bar-height) + 20rpx);
		left: 30rpx;
		z-index: 100;
		width: 70rpx;
		height: 70rpx;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
		
		.iconfont {
			color: #6A4C29;
			font-size: 36rpx;
		}
	}
	
	/* 海报主图区域 */
	.poster-hero {
		width: 100%;
		height: 500rpx;
		position: relative;
		
		.poster-image {
			width: 100%;
			height: 100%;
		}
		
		.poster-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
		}
		
		.poster-title {
			position: absolute;
			bottom: 60rpx;
			left: 40rpx;
			color: #fff;
			
			.main-title {
				font-family: "汉仪尚巍手书", "思源宋体", serif;
				font-size: 60rpx;
				display: block;
				margin-bottom: 10rpx;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			}
			
			.sub-title {
				font-size: 32rpx;
				opacity: 0.9;
				display: block;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			}
		}
	}
	
	/* 内容区域 */
	.content-section {
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #F8F5EF;
		margin-top: -40rpx;
		position: relative;
		z-index: 10;
	}
	
	/* 标签 */
	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 40rpx;
		
		.tag {
			background-color: rgba(200, 166, 117, 0.2);
			color: #6A4C29;
			font-size: 24rpx;
			padding: 8rpx 20rpx;
			border-radius: 30rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
		}
	}
	
	/* 各个板块通用标题 */
	.section-title {
		font-family: "汉仪尚巍手书", "思源宋体", serif;
		font-size: 36rpx;
		color: #6A4C29;
		display: block;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 20rpx;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 15rpx;
			height: 30rpx;
			width: 6rpx;
			background-color: #C8A675;
			border-radius: 3rpx;
		}
	}
	
	/* 简介 */
	.description {
		margin-bottom: 50rpx;
		
		.description-text {
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
		}
	}
	
	/* 特色亮点 */
	.features {
		margin-bottom: 50rpx;
		
		.feature-item {
			display: flex;
			margin-bottom: 30rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 15rpx;
			box-shadow: 0 5rpx 15rpx rgba(106, 76, 41, 0.05);
		}
		
		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(200, 166, 117, 0.2);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			
			.iconfont {
				color: #6A4C29;
				font-size: 40rpx;
			}
		}
		
		.feature-content {
			flex: 1;
		}
		
		.feature-title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 10rpx;
			display: block;
		}
		
		.feature-desc {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
		}
	}
	
	/* 相关产品 */
	.related-products {
		margin-bottom: 120rpx;
		
		.products-scroll {
			white-space: nowrap;
		}
		
		.product-card {
			display: inline-block;
			width: 240rpx;
			margin-right: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			overflow: hidden;
			box-shadow: 0 5rpx 15rpx rgba(106, 76, 41, 0.05);
		}
		
		.product-image {
			width: 240rpx;
			height: 240rpx;
		}
		
		.product-name {
			font-size: 26rpx;
			color: #333;
			padding: 10rpx 15rpx;
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.product-price {
			font-size: 30rpx;
			color: #C8A675;
			padding: 0 15rpx 15rpx;
			display: block;
		}
	}
	
	/* 底部按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		padding: 20rpx 30rpx;
		box-shadow: 0 -5rpx 15rpx rgba(0, 0, 0, 0.05);
		
		.share-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #F5F2EA;
			color: #6A4C29;
			font-size: 24rpx;
			border-radius: 10rpx;
			width: 100rpx;
			height: 80rpx;
			margin-right: 20rpx;
			padding: 0;
			line-height: 1.2;
			
			.iconfont {
				font-size: 32rpx;
				margin-bottom: 5rpx;
			}
		}
		
		.action-btn {
			flex: 1;
			background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
			color: #fff;
			font-size: 30rpx;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	/* 图标字体 */
	.icon-fanhui:before {
		content: "\e624";
	}
	
	.icon-fenxiang:before {
		content: "\e86e";
	}
	
	.icon-qingming:before {
		content: "\e622";
	}
	
	.icon-shouyizhizuo:before {
		content: "\e623";
	}
	
	.icon-chuangtong:before {
		content: "\e66f";
	}
</style>